<template>
  <div class="resourcebid">
    <div class="crumbs-wrapper">
      <Crumbs title="资源申请" />
    </div>
    <div class="main">
      <el-form :inline="true" :model="formlist" size="small">
        <el-form-item>
          <el-select
            v-model="formlist.orderType"
            placeholder="工单类型"
            clearable
          >
            <el-option label="PaaS资源申请" value="4" />
            <el-option label="IaaS资源申请" value="5" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formlist.workStatus"
            placeholder="工单状态"
            clearable
          >
            <el-option label="待回复" :value="0" />
            <el-option label="关闭" :value="1" />
            <el-option label="待办" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formlist.priority" placeholder="优先级" clearable>
            <el-option label="紧急" :value="0" />
            <el-option label="高" :value="1" />
            <el-option label="中" :value="2" />
            <el-option label="低" :value="3" />
          </el-select>
        </el-form-item>
           <el-form-item>
            <el-date-picker
              v-model="date"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        <el-form-item>
          <el-button type="deflaut" @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addDialogVisible = true"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
      <div style="max-height: calc(100% - 100px); overflow-y: auto" ref="tableBoxref">
         <el-row>
        <el-table
          :data="tableData"
          :header-cell-style="{ background: '#FAFAFA', textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          size="small"
        >
          <el-table-column prop="orderNo" label="工单编号"> </el-table-column>
          <el-table-column prop="orderType" label="工单类型">
             <template slot-scope="scope">
               <span v-if="scope.row.orderType=='4'">PaaS资源申请</span>
               <span v-else>IaaS资源申请</span>
               </template>  
           </el-table-column>
          <el-table-column prop="orderDesc" label="工单描述"> </el-table-column>
          <el-table-column prop="priority" label="优先级"> 
            <template slot-scope="scope">
               <span v-if="scope.row.priority=='0'">紧急</span>
               <span v-if="scope.row.priority=='1'">高</span>
               <span v-if="scope.row.priority=='2'">中</span>
               <span v-if="scope.row.priority=='3'">低</span>
               </template>  
          </el-table-column>
          <el-table-column prop="createBy" label="创建人"> </el-table-column>
          <el-table-column prop="endDate" label="截止时间"> </el-table-column>
          <el-table-column label="工单状态">
            <template slot-scope="scope">
              <span v-if="scope.row.workStatus === '0'">待回复</span>
              <span v-if="scope.row.workStatus === '1'">关闭</span>
              <span v-if="scope.row.workStatus === '2'">待办</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="pass(scope.row)">流转</el-button>
              &nbsp;&nbsp;
              <el-popconfirm
                title="是否删除该工单数据？"
                @confirm="remove(scope.row)"
              >
                <el-button type="text" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      </div>
     
      <br />
      <p>
        <!-- 分页 -->
        <el-pagination
          background
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChangePage"
          :current-page="formlist.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="formlist.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </p>
    </div>

    <!-- 新增dialog -->
    <el-dialog
      title="工单类型选择"
      :visible.sync="addDialogVisible"
      width="30%"
      @close="applyType=''"
    >
      <div class="addradio">
        <el-radio v-model="applyType" label="paas">PaaS资源申请</el-radio>
        <el-radio v-model="applyType" label="iaas">IaaS资源申请</el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="linkTo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {
  },
  data () {
    return {
      applyType: '', //资源申请类型
      addDialogVisible: false,
      date:[],
      formlist: {
        orderType: '',
        priority: '',
        workStatus: '',
        // beginDate: '',
        // finishDate: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
    }
  },
  created () {
    this.getTabledata()
  },
  methods: {
    pass(data){
      console.log(data.orderType)
      if(data.orderType=='4'){
        // 根据类型跳不同的
      this.$router.push({
        path:'/paasApply',
        query:{
          orderNo:data.orderNo
        }
      })
      }else{
// 根据类型跳不同的
      this.$router.push({
        path:'/iaasApply',
        query:{
          orderNo:data.orderNo
        }
      })
      }
      
    },
    linkTo () {
      if(this.applyType==''){
        this.$message.info('请选择要申请的类型！')
        return
      }
      this.$router.push(`/${this.applyType}Apply`)
    },
    reset () {
      this.formlist.orderType = ''
      this.formlist.priority = ''
      this.formlist.workStatus = ''
      this.formlist.pageNum = 1
      this.date = []
      this.getTabledata()
    },
    search () { 
      this.formlist.pageNum = 1
      this.getTabledata()
    },
    // 监听分页pagesize改变函数
    handleSizeChange (newSize) {
      this.$refs.tableBoxref.scrollTop = 0
      this.formlist.pageNum = 1
      this.formlist.pageSize = newSize
      this.getTabledata()
    },
    // 监听怕个pagenum改变函数
    handleCurrentChangePage (newPage) {
      this.formlist.pageNum = newPage
      this.getTabledata()
    },
    // 获取表格数据
    getTabledata () {
      this.formlist.beginDate = this.date[0]
      this.formlist.finishDate = this.date[1]
      this.$http({
        url: '/api/work/order/apply/list',
        method: 'GET',
        params: this.formlist
      }).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
      })
    },
    remove (data) {
      this.$http({
        url: `/api/work/order/apply/delete/${data.orderNo}`,
        method: 'get',
      }).then(res => {
        this.getTabledata()
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.resourcebid {
  padding: 5px 30px 10px;
  height: calc(100vh - 100px);
  background: #f8f8f8;

  .main {
    position: relative;
    height: 92%;
    background-color: white;
    // overflow-y: auto;
    padding: 30px;
    box-sizing: border-box;
    position: relative;
  }
}

.addradio {
  text-align: center;
}

.title {
  border-left: 4px solid #3b6ef9;
  padding-left: 20px;
  margin-bottom: 20px;
  height: 25px;
  margin-top: 20px;
}
.buttonbox {
  margin-bottom: 20px;
}

.subaddform {
  text-align: center;
  margin-top: 20px;
}

.textarea {
  width: 85vw;
}
</style>
